import React, { Component } from 'react'
import * as echarts from 'echarts';
import { Button, Card } from 'antd'
import './bar.css'
import { reqGetEcharts } from '../../api';

class bar extends Component {
  constructor(props) {
    super();
    this.state = {
      card: {
        title: (<><Button type="primary">更新</Button></>)
      },
      option: {
        yAxis: {
          type: 'value'
        }
      }
    }
  }

  setData = async () => {
    let res = await reqGetEcharts();
    this.setState({
      option: {
        ...this.state.option,
        xAxis: res.data.xAxis,
        series: res.data.series
      }
    }, () => {
      var mychart = echarts.init(document.getElementById('main'))
      mychart.setOption(this.state.option)
    })
  }
  componentDidMount() {
    this.setData()
  }
  render() {
    return (
      <Card title={this.state.card.title} style={{ width: '100%', height: '100%' }}>
        <div id='main' style={{ width: '90%', height: '90%' }}> </div>
      </Card>
    );
  }
}

export default bar;                 